import 'package:dart_learn/main.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: const UIDemo(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      alignment: Alignment.center,
      child: const Text(
        'hello flutter',
        style: TextStyle(
            // 文字颜色
            color: Colors.red,
            // 文字大小
            fontSize: 40.0,
            // 粗体
            fontWeight: FontWeight.bold),
      ),
    );
  }
}

class UIDemo extends StatefulWidget {
  const UIDemo({super.key});

  @override
  State<UIDemo> createState() => _UIDemoState();
}

class _UIDemoState extends State<UIDemo> {
  @override
  Widget build(BuildContext context) {
    // SingleChildScrollView可滚动视图
    return SingleChildScrollView(
      // Column 列
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          GestureDetector(
            onTap: () {
              jdLog('点击事件');
            },
            child: Container(
              width: 200,
              height: 40,
              margin: const EdgeInsets.fromLTRB(20, 50, 0, 0),
              alignment: Alignment.center,
              decoration: BoxDecoration(
                // 容器背景色
                color: Colors.red,
                // 圆角
                borderRadius: const BorderRadius.all(Radius.circular(9)),
                // 边框
                border: Border.all(color: Colors.blue, width: 2),
              ),
              child: const Text(
                '我是一段文字',
                style: TextStyle(color: Colors.white, fontSize: 11),
              ),
            ),
          ),
          const SizedBox(
            width: 0,
            height: 50,
          ),
          Image.asset(
            'assets/images/ic_launcher.png',
            width: 100,
            height: 100,
            fit: BoxFit.cover,
            color: Colors.blue,
          ),
          const SizedBox(
            width: 0,
            height: 50,
          ),
          TextButton(
              onPressed: () {
                jdLog('TextButton点击事件');
              },
              child: const Text('我是TextButton按钮')),
          const SizedBox(
            width: 0,
            height: 50,
          ),
          TextField(
              decoration: InputDecoration(
            fillColor: Colors.grey.withOpacity(0.5),
            filled: true,
            contentPadding: const EdgeInsets.fromLTRB(10, 10, 10, 10),
            counterText: '',
            border: const OutlineInputBorder(
              borderSide: BorderSide.none,
              borderRadius: BorderRadius.all(Radius.circular(0)),
            ),
            focusedBorder: const OutlineInputBorder(
              borderSide: BorderSide.none,
              borderRadius: BorderRadius.all(Radius.circular(0)),
            ),
            enabledBorder: const UnderlineInputBorder(
              borderSide: BorderSide.none,
              borderRadius: BorderRadius.all(Radius.circular(0)),
            ),
            hintText: '我是文本输入框',
            hintStyle: const TextStyle(fontSize: 16),
            floatingLabelBehavior: FloatingLabelBehavior.never, // 禁止浮动行为
          )),
          const SizedBox(
            width: 0,
            height: 50,
          ),
          Padding(
            padding: const EdgeInsets.fromLTRB(24, 0, 24, 0),
            child: Text.rich(
              TextSpan(text: '为了更好地体验xxxx服务，请查看并同意', children: [
                TextSpan(
                    text: '《用户协议》',
                    recognizer: TapGestureRecognizer()..onTap = () {},
                    style: const TextStyle(color: Colors.blue, fontSize: 22)),
                const TextSpan(text: '和'),
                TextSpan(
                  text: '《隐私政策》',
                  recognizer: TapGestureRecognizer()..onTap = () {},
                  style: const TextStyle(color: Colors.blue, fontSize: 22),
                ),
                const TextSpan(text: '请查看并同意请查看并同意请查看并同意请查看并同意'),
              ]),
              style: const TextStyle(color: Colors.black, fontSize: 20),
            ),
          ),
          const SizedBox(
            width: 0,
            height: 50,
          ),
          Row(
            // 可以改mainAxisAlignment crossAxisAlignment 属性来看效果
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                width: 100,
                height: 100,
                color: Colors.red,
              ),
              Container(
                width: 70,
                height: 70,
                color: Colors.yellow,
              ),
              Container(
                width: 50,
                height: 50,
                color: Colors.blue,
              ),
            ],
          ),
          const SizedBox(
            width: 0,
            height: 50,
          ),
          Row(
            // 可以改mainAxisAlignment crossAxisAlignment 属性来看效果
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                width: 100,
                height: 100,
                color: Colors.red,
              ),
              Expanded(
                  child: Container(
                width: 70,
                height: 70,
                color: Colors.yellow,
              )),
              Container(
                width: 50,
                height: 50,
                color: Colors.blue,
              ),
            ],
          ),
          const SizedBox(
            width: 0,
            height: 50,
          ),
          Stack(
            children: [
              Container(
                  color: Colors.red,
                  width: 200,
                  height: 200,
                  child: Icon(Icons.add)),
              Container(
                  color: Colors.yellow,
                  width: 100,
                  height: 100,
                  child: Icon(Icons.timelapse)),
              Container(
                  color: Colors.blue,
                  width: 50,
                  height: 50,
                  child: Icon(Icons.error)),
            ],
          ),
          const SizedBox(
            width: 0,
            height: 50,
          ),
          const Text(
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
              '防静电上课了甲方都课了甲方都是垃圾课了甲方都'
              '是垃圾课了甲方都是垃圾是垃圾放大'
              '收垃圾发啦生发剂到拉萨电极法手打拉法基送达了'),
          const SizedBox(
            width: 0,
            height: 50,
          ),
        ],
      ),
    );
  }
}
